<template>
  <el-row>
    <el-col :span="12">
      <div class="form-main">
        <el-card>
          <div slot="header" class="text-primary">
            <span class="title"> 新增用户 </span>
          </div>
                 <el-form
              ref="form"
              :model="form"
            
              :rules="rules"
              status-icon
              label-width="80px"
            >
            <el-form-item label="管理员？">
            <el-tooltip :content="'切换类型: ' + form.utype" placement="top">
  <el-switch
    v-model="form.utype"
    active-color="#DDD"
    inactive-color="#13ce66"
    active-value="1"
    inactive-value="2">
  </el-switch>
</el-tooltip>
            </el-form-item>
              <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username"></el-input>
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password"></el-input>
              </el-form-item>

              <el-form-item label="确认密码" prop="pwdConfirm">
                <el-input v-model="form.pwdConfirm" type="password"></el-input>
              </el-form-item>

              <el-form-item label="姓名" prop="realname">
                <el-input v-model="form.realname"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="form.gender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker
                  v-model="form.birthday"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>

              <el-form-item label="电话" prop="tel">
                <el-input v-model="form.tel"></el-input>
              </el-form-item>

              <el-form-item label="地址" prop="address">
                <el-input v-model="form.address"></el-input>
              </el-form-item>

              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <div>
                <el-button
                  style="margin-left: 80px"
                  @click="submitForm('form')"
                  type="primary"
                  >提交</el-button
                >
                
              </div>
            </el-form>


        </el-card>
      </div>


    </el-col>
  </el-row>
</template>
<script>
import { userAdd} from '@/api/accountApi'
export default {
 data() {
    let validatePwd2 = (rule, value, callback) => {
      console.log(rule)
      if (value == '') {
        callback(new Error('请输入确认密码'))
      } else if (value.length < 6 || value.length > 30) {
        callback(new Error('密码长度为（6~30）'))
      } else if (value != this.form.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }

    return {
      rules: {
        tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        realname: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 20, message: '注意长度3~6', trigger: 'blur' },
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '注意长度3~6', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 30, message: '注意长度6~30', trigger: 'blur' },
        ],
        pwdConfirm: [
          {
            required: true,
            validator: validatePwd2,
            trigger: 'blur',
          },
        ],
      },
    
      form: {
        utype:1,
        username: '',
        password: '',
        pwdConfirm: '',
        realname: '',
        gender: '男',
        tel: '',
        email: '',
        address: '',
        birthday: '1999-09-09',
        avatar: '',
      },
    }
  },
  created() {
    this.$nextTick(() => {
      
    })
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userAdd(this.form).then((resp) => {
            let respData = resp.data //JSON.parse(resp.data);
            if (respData.code == 0) {
              this.$message({
                message: respData.message,
                type: 'error',
              })
            } else {
              this.$message({
                message: respData.message,
                type: 'success',
              })
            }
          })
        } else {
          this.$message({
            message: '表单验证失败',
            type: 'error',
          })
        }
      })
    },
  },
}
import '@/assets/css/variables.css'
</script>
<style scoped>
.el-card {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--border-color);
}
::v-deep .el-card__header {
  border-bottom: 1px solid var(--border-color);
}

::v-deep .el-input__inner {
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: var(--bg-color); border: 1px solid var(--border-color);
}

</style>
